import React from 'react';
import './Index.css'
import './Header.css'
import logo from '../../static/images/logo.png'

//引入路由
import {Link} from 'react-router-dom'


//下面是antd引入
import {Button} from 'antd';
import {Layout, Menu, } from 'antd';
import {UserOutlined, VideoCameraOutlined, UploadOutlined} from '@ant-design/icons';


const {Header, Content, Sider} = Layout;

class Index extends React.Component {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    render() {
        return (
            <Layout>
                <Header className="header">
                    <div className="logo">
                        <div>
                            <img src={logo} alt=""/>
                            <span id='title'> Welcome To Team2-Supermarket</span>
                        </div>
                        <div>
                            <span className='headerName'>姓名:</span>
                            <span className='headerName'>工号:</span>
                            <Button type="primary">退出</Button>
                        </div>

                    </div>
                </Header>
                <Layout>
                    <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                        <div className="logo" />
                        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                            <Menu.Item key="1">
                                <UserOutlined />
                                <Link to='/Index/Xitongshouye'>系统首页</Link>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <VideoCameraOutlined />
                                <Link to='/Index/Yuangongguanli'>员工管理</Link>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <UploadOutlined />
                                <Link to='/Index/Shangpinguanli'>商品管理</Link>
                            </Menu.Item>
                            <Menu.Item key="4">
                                <UploadOutlined />
                                <Link to='/Index/Xiaoshouguanli'>销售管理</Link>
                            </Menu.Item>
                            <Menu.Item key="5">
                                <UploadOutlined />
                                <Link to='/Index/Cuxiaohuodong'>促销活动</Link>
                            </Menu.Item>
                            <Menu.Item key="6">
                                <UploadOutlined />
                                <Link to='/Index/Shangpinshanghuo'>商品上货</Link>
                            </Menu.Item>
                            <Menu.Item key="7">
                                <UploadOutlined />
                                <Link to='/Index/Shouyinmaidan'>收银买单</Link>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout style={{padding: '0 24px 24px'}}>
                        <Content className="site-layout-background" style={{padding: 24,margin: 0,minHeight: 800,}}>
                            {this.props.children}
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
}

export default Index